<template>
	<div class="view-myFooter">
		<mt-tabbar class="bottom-nav" v-model="bottomNavSelect">
			<mt-tab-item id="/">
				<i slot="icon" class="iconfont icon-BAI-wuzi"></i> 首页
			</mt-tab-item>
			<mt-tab-item id="game">
				<i slot="icon" class="iconfont icon-xiaoyouxi"></i> 游戏
			</mt-tab-item>
			<mt-tab-item id="starShow">
				<i slot="icon" class="iconfont icon-xingxing"></i> 星秀
			</mt-tab-item>
			<mt-tab-item id="entertainment">
				<i slot="icon" class="iconfont icon-yule"></i> 娱乐
			</mt-tab-item>
			<mt-tab-item id="mine">
				<i slot="icon" class="iconfont icon-tubiaozhizuomoban"></i> 关注
			</mt-tab-item>
		</mt-tabbar>
	</div>
</template>

<script>
	import { mapState, mapGetters, mapMutations, mapActions } from 'vuex';

	export default {
		name: 'MyFooter',
		data() {
			return {
				// 底部选择
				bottomNavSelect: '/',
			}
		},
		mounted() {
			let vm = this;
		},
		computed: {},
		watch: {
			bottomNavSelect(val, oldVal) {
				let vm = this;
				vm.$router.push(val);
			}
		},
		methods: {}
	}
</script>

<style lang="scss" scoped>
	.view-myFooter {
		.bottom-nav {
			position: fixed;
			bottom: 0;
			color: #c7c7c7;
			background-color: white;
			.icon-BAI-wuzi {
				font-size: 22px;
			}
			.icon-xingxing {
				font-size: 18px;
			}
			.icon-yule {
				font-size: 19px;
			}
			.icon-tubiaozhizuomoban {
				font-size: 19px;
			}
		}
		.mint-tabbar> {
			.mint-tab-item.is-selected {
				transition: all .5s ease;
				color: #0ac68b;
				background-color: none;
				.iconfont {
					transform: scale(1.3);
				}
			}
		}
	}
</style>

<style lang="scss">
	.view-myFooter {}
</style>